<!--
 * @Author: your name
 * @Date: 2020-02-24 18:15:46
 * @LastEditTime: 2020-03-09 22:04:18
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /oneslide/demo.html
 -->
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">

  <title>TinySlide——极简 Markdown PPT</title>

  <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
  <meta name="author" content="Hakim El Hattab">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/reveal.css">
  <link rel="stylesheet" href="lib/css/monokai.css">

  <link rel="stylesheet" href="css/main.css">

  <link rel="stylesheet" href="//at.alicdn.com/t/font_2326259_fsxxaha9fni.css">
  <!--[if lt IE 9]>
  <script src="lib/js/html5shiv.js"></script>
  <![endif]-->
</head>

<body>

<div class="control">
  <span class="iconfont icon-setting"></span>
</div>
<div class="menu">
  <span class="iconfont icon-close"></span>
  <div class="detail">
    <div class="tab active"><span class="iconfont icon-edit"></span>内容编辑</div>
    <div class="tab"><span class="iconfont icon-theme"></span>主题与特效</div>
    <div class="tab download"><span class="iconfont icon-download"></span>下载PDF</div>
    <div class="tab "><span class="iconfont icon-speaker"></span>演讲者模式</div>
    <div class="content active">
      <div class="header">编辑</div>
      <div class="body editor">
        <textarea></textarea>
        <div class="uploader">
          <input type="file" id="img-uploader" accept="image/*">
          <label for="img-uploader">点击上传图片(支持.png、.jpg、.gif，最大2M)</label>
        </div>
        <div>
          <button class="button-save">保存</button>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="header">主题特效</div>
      <div class="body theme">
        <h5>主题</h5>
        <div class="themes">
          <figure data-theme="beige">
            <img src="./img/beige.png" alt="beige">
            <figcaption>beige</figcaption>
          </figure>
          <figure data-theme="black">
            <img src="./img/black.png" alt="black">
            <figcaption>black</figcaption>
          </figure>
          <figure data-theme="blood">
            <img src="./img/blood.png" alt="blood">
            <figcaption>blood</figcaption>
          </figure>
          <figure data-theme="league">
            <img src="./img/league.png" alt="league">
            <figcaption>league</figcaption>
          </figure>
          <figure data-theme="moon">
            <img src="./img/moon.png" alt="moon">
            <figcaption>moon</figcaption>
          </figure>
          <figure data-theme="night">
            <img src="./img/night.png" alt="night">
            <figcaption>night</figcaption>
          </figure>
          <figure data-theme="serif">
            <img src="./img/serif.png" alt="serif">
            <figcaption>serif</figcaption>
          </figure>
          <figure data-theme="simple">
            <img src="./img/simple.png" alt="simple">
            <figcaption>simple</figcaption>
          </figure>
          <figure data-theme="sky">
            <img src="./img/sky.png" alt="sky">
            <figcaption>sky</figcaption>
          </figure>
          <figure data-theme="solarized">
            <img src="./img/solarized.png" alt="solarized">
            <figcaption>solarized</figcaption>
          </figure>
          <figure data-theme="white">
            <img src="./img/white.png" alt="white">
            <figcaption>white</figcaption>
          </figure>
        </div>

        <h5>转场</h5>
        <select class="transition">
          <option value="slide">滑动</option>
          <option value="fade">淡化</option>
          <option value="convex">凸出</option>
          <option value="concave">凹陷</option>
          <option value="zoom">缩放</option>
          <option value="none">无</option>
        </select>

        <h5>对齐</h5>
        <select class="align">
          <option value="center">居中</option>
          <option value="left-top">左上</option>
        </select>
      </div>
    </div>
    <div class="content">
      <div class="header">下载</div>
      <div class="body download">
        <p>下载PDF</p>
      </div>
    </div>
    <div class="content">
      <div class="header">演讲者模式</div>
      <div class="body speaker">
        <p>按 <strong>S</strong> 键， 开启演讲者模式</p>
      </div>
    </div>
  </div>
</div>
<div class="reveal">
  <!-- Any section element inside of this container is displayed as a slide -->
  <div class="slides">
  </div>
</div>
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.10.0/dist/av-min.js"></script>
<script src="js/reveal.js"></script>
<script src="js/main.js"></script>


</body>
</html>
